<template>
  <div>
    <ul class="grid-flex">
      <template v-for="(value, key) in model">
        <!-- <template
          v-if="
            /imgs|AuditStatus|identifyingcode|signWayCN|PayStatus|is_sys|CurStatus|IsMana|EmpRM|backcard|u_manager_role_values|id|Esignature|password|typeid|bms|BankCardNos|EmpPhones|ElectronicChapter|subModel|invoiceApplyDate|list|musteditpwd|token|roleRight/i.test(
              key
            )
          "
        ></template>-->
        <template v-if="!model[key] && (typeof model[key] !== 'number')"></template>
        <li
          :key="key"
          class="row"
          v-else
        >
          <!-- #region labal -->
          <div class="label text-align-left">
            <h1>{{ $language.local(key) }}：</h1>
          </div>
          <!-- #endregion -->

          <!-- #region value -->
          <div class="value">
            <template v-if="/date|time/i.test(key)">{{ new Date(model[key]).format("yyyy-MM-dd") }}</template>
            <template v-else-if="/img|customerReceiptUrl|SignName|ElectronicChapter/i.test(key)">
              <el-button
                @click="showImg(model[key])"
                type="text"
              >查看图片</el-button>
            </template>
            <template v-else-if="/file|url|path/i.test(key)">
              <el-button
                @click="$common.download(model[key])"
                type="text"
              >下载</el-button>
            </template>
            <template v-else>
              <template v-if="model[key] && model[key].length > 15">
                <el-tooltip
                  :content="model[key]"
                  placement="top"
                >
                  <div class="wrap">{{ $common.dictionary.get(key, model[key]) }}</div>
                </el-tooltip>
              </template>
              <div
                class="wrap"
                v-else
              >
                <span v-if="/rate/i.test(key)">{{ model[key] }}%</span>
                <span v-else>{{ $common.dictionary.get(key, model[key]) }}</span>
              </div>
            </template>
          </div>

          <!-- #endregion -->
        </li>
      </template>

      <slot></slot>
    </ul>
    <!-- <template v-if="Object.hasOwnProperty.call(model, 'backcard')">
      <div>
        <h1>{{ $language.local("backcard") }}:</h1>
        <ul class="grid-flex align-right">
          <template v-for="item in model.backcard">
            <template v-for="(value, key) in item">
              <template v-if="/id|AccountName/i.test(key)"></template>
              <li v-else :key="key" class="row">
                <div class="label text-align-left">
                  <h1>{{ $language.local(key) }}：</h1>
                </div>
                <div class="value">
                  <div class="wrap">
                    {{ value }}
                  </div>
                </div>
              </li>
            </template>
          </template>
        </ul>
      </div>
    </template>-->
    <el-dialog
      :visible.sync="imgVisible"
      append-to-body
      title="查看"
    >
      <img
        :src="imgSrc"
        alt
        srcset
        style="width: 100%"
      />
    </el-dialog>
  </div>
</template>

<script>
export default {
  props: ["model"],
  data() {
    return {
      imgVisible: false,
      imgSrc: "",
    };
  },
  methods: {
    showImg(path) {
      if (!(/http/i).test(path)) {
        path = process.env.VUE_APP_BASEURL + path;
      }
      this.imgSrc = path;
      this.imgVisible = true;
    },
  },
};
</script>

<style lang="less" scoped>
ul {
  font-size: 12px;
  border-left: 1px solid #dddddd;

  li:nth-of-type(-n + 3) {
    border-top: 1px solid #dddddd;
  }
  li {
    width: 33%;
    margin: 0;
    display: flex;
    justify-content: space-between;
    .label {
      width: 38%;
      background-color: #f3f3f3;
      border-bottom: 1px solid #dddddd;
      display: flex;
      justify-content: center;

      h1 {
        max-width: 88%;
        font-size: 12px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }
    }
    .html-text {
      width: 100%;
    }
    .value {
      border: 1px solid #dddddd;
      border-top: none;

      align-items: center;
      display: flex;
      justify-content: center;
      width: 62%;
      padding: 0 1rem;
      .wrap {
        text-align: right;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }
    }
  }
  .li-html {
    width: 100%;
  }
}
</style>
